<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.g5M-iZUiocFCi9YAzojtRAAAAA?w=210&h=210&c=7&r=0&o=5&dpr=1.3&pid=1.7"
          alt=""
        />
      </div>
      <div style="margin: 100px"></div>
      <form class="login_input" ref="loginRef">
        <div>
          <el-icon size="40px" color="#AAAAAA"><UserFilled /></el-icon>
          <input type="text" v-model="loginRef.username" />
        </div>
        <div style="margin: 5px; border: 0"></div>

        <div>
          <el-icon size="40px" color="#AAAAAA"><Lock /></el-icon>
          <input type="password" v-model="loginRef.password" />
        </div>
        <div style="margin: 10px; border: 0"></div>
        <div class="login_button">
          <div style="margin-right: 10px">
            <el-button type="primary" @click="login">登录</el-button>
          </div>
          <div>
            <el-button type="success" @click="resetForm">重置</el-button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginRef: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    resetForm() {
      this.$refs.loginRef.reset();
    },
    login() {
      console.log(this.loginRef);
      this.$http
        .post("/login", this.loginRef)
        .then((res) => {
          if (res.data.meta.status !== 200) {
            this.$refs.loginRef.reset();
            return alert("登录失败");
          }
          this.$message.success('登录成功')
          // localStorage.setItem("token", res.data.data.token);
          window.sessionStorage.setItem("token", res.data.data.token);
          this.$router.push("/home");
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div {
    display: flex;
    flex-direction: row;
    border: 1px solid #2b4b6b;
    input {
      width: 300px;
      height: 40px;
      outline: none;
      border: 0;
    }
  }
  .login_button {
    border: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
    div {
      border: 0;
      margin-right: 50px;
    }
  }
}
</style>
